<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表管理</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            height: 100vh;
        }

        .main-panel {
            width: 100%;
            background-color: white;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            text-align: center;
        }

        .header h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 300;
        }

        .header p {
            margin: 0;
            opacity: 0.9;
            font-size: 16px;
        }

        .content-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .toolbar-section {
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
            flex-shrink: 0;
        }

        .toolbar-section h3 {
            margin: 0 0 15px 0;
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
        }

        .search-filter-section {
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            flex-shrink: 0;
        }

        .search-filter-section .el-form-item {
            margin-bottom: 0;
            margin-right: 16px;
        }

        .search-filter-section .el-form-item__label {
            color: #606266;
            font-weight: 500;
        }

        .table-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 20px 20px 20px;
            overflow: hidden;
        }

        .table-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .el-table {
            height: 100% !important;
        }

        .el-table__body-wrapper {
            overflow-y: auto !important;
            height: calc(100% - 40px) !important;
        }

        .status-tag {
            text-align: center;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .user-name {
            font-weight: 500;
            color: #2c3e50;
        }

        .user-email {
            font-size: 12px;
            color: #606266;
        }

        .role-tag {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            background-color: #f0f9ff;
            color: #409eff;
            border: 1px solid #d4edda;
        }

        .admin-role {
            background-color: #fef2f2;
            color: #dc3545;
            border-color: #f5c6cb;
        }

        .manager-role {
            background-color: #fff7e6;
            color: #fa8c16;
            border-color: #fed7aa;
        }

        .empty-user-list {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .details-dialog {
            height: 70vh !important;
            display: flex;
            flex-direction: column;
        }

        .details-dialog .el-dialog__body {
            height: calc(70vh - 120px);
            overflow-y: auto;
            padding: 20px;
            flex: 1;
            min-height: 0;
        }

        .details-dialog .el-dialog__header {
            padding: 20px 20px 10px 20px;
            border-bottom: 1px solid #ebeef5;
            flex-shrink: 0;
        }

        .details-dialog .el-dialog__footer {
            padding: 10px 20px 20px 20px;
            border-top: 1px solid #ebeef5;
            flex-shrink: 0;
        }

        .user-detail-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .user-detail-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e9ecef;
        }

        .user-detail-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }

        .user-detail-info h3 {
            margin: 0 0 5px 0;
            color: #2c3e50;
            font-size: 20px;
        }

        .user-detail-info p {
            margin: 0;
            color: #606266;
            font-size: 14px;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .detail-label {
            font-weight: 500;
            color: #2c3e50;
            font-size: 14px;
        }

        .detail-value {
            color: #606266;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="main-panel">
                <!-- <div class="header">
                    <h1>用户列表管理</h1>
                    <p>管理系统用户信息、权限和状态</p>
                </div> -->

                <div class="toolbar-section">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <h3>用户管理</h3>
                        <div>
                            <el-button type="success" size="small" icon="el-icon-download"
                                @click="exportUsers">导出用户</el-button>
                            <el-button type="warning" size="small" icon="el-icon-upload2"
                                @click="importUsers">导入用户</el-button>
                            <el-button type="primary" size="small" icon="el-icon-plus"
                                @click="createNewUser">新增用户</el-button>
                        </div>
                    </div>
                </div>

                <div class="search-filter-section">
                    <el-form :inline="true" size="small">
                        <el-form-item label="姓名/邮箱">
                            <el-input v-model="searchKeyword" placeholder="输入姓名或邮箱搜索" @change="filterUsers"
                                style="width: 200px;">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-select v-model="departmentFilter" placeholder="选择部门" @change="filterUsers"
                                style="width: 150px;">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="人力资源部" value="HR"></el-option>
                                <el-option label="财务部" value="Finance"></el-option>
                                <el-option label="技术部" value="IT"></el-option>
                                <el-option label="运营部" value="Operations"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="角色">
                            <el-select v-model="roleFilter" placeholder="选择角色" @change="filterUsers"
                                style="width: 120px;">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="管理员" value="admin"></el-option>
                                <el-option label="经理" value="manager"></el-option>
                                <el-option label="员工" value="employee"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="statusFilter" placeholder="选择状态" @change="filterUsers"
                                style="width: 120px;">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="活跃" value="active"></el-option>
                                <el-option label="禁用" value="inactive"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="filterUsers" icon="el-icon-search">搜索</el-button>
                            <el-button @click="resetFilter" icon="el-icon-refresh">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="table-section">
                    <div class="table-container" v-if="filteredUserList.length > 0">
                        <el-table :data="filteredUserList" style="width: 100%; height: 100%;"
                            :max-height="tableMaxHeight" border>
                            <el-table-column width="50" align="center" label="NO." type="index"></el-table-column>

                            <el-table-column prop="userInfo" label="用户信息" min-width="200" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="user-info">
                                        <div class="user-avatar">{{ scope.row.name.charAt(0) }}</div>
                                        <div class="user-details">
                                            <div class="user-name">{{ scope.row.name }}</div>
                                            <div class="user-email">{{ scope.row.email }}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="department" label="部门" min-width="120" align="center"
                                show-overflow-tooltip sortable>
                                <template slot-scope="scope">{{ getDepartmentName(scope.row.department) }}</template>
                            </el-table-column>

                            <el-table-column prop="position" label="职位" min-width="120" align="center"
                                show-overflow-tooltip sortable></el-table-column>

                            <el-table-column prop="role" label="角色" min-width="100" align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span :class="getRoleClass(scope.row.role)" class="role-tag">{{
                                        getRoleName(scope.row.role) }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="status" label="状态" min-width="80" align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="status-tag">
                                        <el-tag :type="getStatusType(scope.row.status)" size="small">{{
                                            getStatusText(scope.row.status) }}</el-tag>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="phone" label="电话" min-width="130" align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">{{ scope.row.phone || '-' }}</template>
                            </el-table-column>

                            <el-table-column prop="joinDate" label="加入日期" min-width="120" align="center"
                                show-overflow-tooltip sortable>
                                <template slot-scope="scope">{{ formatDate(scope.row.joinDate) }}</template>
                            </el-table-column>

                            <el-table-column prop="lastLogin" label="最后登录" min-width="160" align="center"
                                show-overflow-tooltip sortable>
                                <template slot-scope="scope">{{ formatDateTime(scope.row.lastLogin) }}</template>
                            </el-table-column>

                            <el-table-column label="操作" min-width="200" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small"
                                        @click="viewUserDetails(scope.row)">查看详情</el-button>
                                    <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
                                    <el-button v-if="scope.row.status === 'active'" type="text" size="small"
                                        style="color: #e6a23c;" @click="toggleUserStatus(scope.row)">禁用</el-button>
                                    <el-button v-else type="text" size="small" style="color: #67c23a;"
                                        @click="toggleUserStatus(scope.row)">启用</el-button>
                                    <el-button type="text" size="small" style="color: #f56c6c;"
                                        @click="deleteUser(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div v-else class="empty-user-list">
                        <el-empty :description="userList.length > 0 ? '暂无符合条件的用户' : '暂无用户数据'"></el-empty>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户详情对话框 -->
        <el-dialog title="用户详细信息" :visible.sync="detailsDialogVisible" width="60%" :before-close="handleDetailsClose"
            custom-class="details-dialog" :close-on-click-modal="false">
            <div v-if="selectedUser" class="user-detail-card">
                <div class="user-detail-header">
                    <div class="user-detail-avatar">{{ selectedUser.name.charAt(0) }}</div>
                    <div class="user-detail-info">
                        <h3>{{ selectedUser.name }}</h3>
                        <p>{{ selectedUser.email }}</p>
                    </div>
                </div>

                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">用户ID</div>
                        <div class="detail-value">{{ selectedUser.id }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">部门</div>
                        <div class="detail-value">{{ getDepartmentName(selectedUser.department) }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">职位</div>
                        <div class="detail-value">{{ selectedUser.position }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">角色</div>
                        <div class="detail-value">{{ getRoleName(selectedUser.role) }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">状态</div>
                        <div class="detail-value">
                            <el-tag :type="getStatusType(selectedUser.status)" size="small">{{
                                getStatusText(selectedUser.status) }}</el-tag>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">电话</div>
                        <div class="detail-value">{{ selectedUser.phone || '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">加入日期</div>
                        <div class="detail-value">{{ formatDate(selectedUser.joinDate) }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">最后登录</div>
                        <div class="detail-value">{{ formatDateTime(selectedUser.lastLogin) }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">创建时间</div>
                        <div class="detail-value">{{ formatDateTime(selectedUser.createTime) }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">备注</div>
                        <div class="detail-value">{{ selectedUser.remarks || '无' }}</div>
                    </div>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="detailsDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="editUser(selectedUser)">编辑用户</el-button>
            </div>
        </el-dialog>

        <!-- 新增/编辑用户对话框 -->
        <el-dialog :title="isEditMode ? '编辑用户' : '新增用户'" :visible.sync="userFormDialogVisible" width="500px"
            :close-on-click-modal="false">
            <el-form :model="userForm" label-width="100px" :rules="userFormRules" ref="userForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>

                <el-form-item label="部门" prop="department">
                    <el-select v-model="userForm.department" placeholder="选择部门" style="width: 100%;">
                        <el-option label="人力资源部" value="HR"></el-option>
                        <el-option label="财务部" value="Finance"></el-option>
                        <el-option label="技术部" value="IT"></el-option>
                        <el-option label="运营部" value="Operations"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="职位" prop="position">
                    <el-input v-model="userForm.position" placeholder="请输入职位"></el-input>
                </el-form-item>

                <el-form-item label="角色" prop="role">
                    <el-select v-model="userForm.role" placeholder="选择角色" style="width: 100%;">
                        <el-option label="管理员" value="admin"></el-option>
                        <el-option label="经理" value="manager"></el-option>
                        <el-option label="员工" value="employee"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="电话">
                    <el-input v-model="userForm.phone" placeholder="请输入电话号码"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select v-model="userForm.status" placeholder="选择状态" style="width: 100%;">
                        <el-option label="活跃" value="active"></el-option>
                        <el-option label="禁用" value="inactive"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="userForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="userFormDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitUserForm">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    userList: [],
                    filteredUserList: [],
                    searchKeyword: '',
                    departmentFilter: '',
                    roleFilter: '',
                    statusFilter: '',
                    detailsDialogVisible: false,
                    selectedUser: null,
                    userFormDialogVisible: false,
                    isEditMode: false,
                    userForm: {
                        id: '', name: '', email: '', department: '', position: '', role: '', phone: '', status: 'active', remarks: ''
                    },
                    userFormRules: {
                        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                        email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
                        department: [{ required: true, message: '请选择部门', trigger: 'change' }],
                        position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
                        role: [{ required: true, message: '请选择角色', trigger: 'change' }],
                        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
                    },
                    resizeTrigger: 0
                }
            },

            computed: {
                tableMaxHeight() {
                    const headerHeight = 98, toolbarHeight = 68, searchHeight = 54, paddingHeight = 40;
                    const height = window.innerHeight - headerHeight - toolbarHeight - searchHeight - paddingHeight;
                    this.resizeTrigger;
                    return Math.max(height, 200);
                }
            },

            mounted() {
                this.loadUserList();
                window.addEventListener('resize', this.handleWindowResize);
            },

            beforeDestroy() {
                window.removeEventListener('resize', this.handleWindowResize);
            },

            methods: {
                loadUserList() {
                    const savedUserList = localStorage.getItem('userList');
                    if (savedUserList) {
                        this.userList = JSON.parse(savedUserList);
                    } else {
                        this.userList = [
                            { id: '1', name: '张三', email: 'zhangsan@company.com', department: 'HR', position: 'HR经理', role: 'manager', phone: '13800138001', status: 'active', joinDate: '2023-01-15', lastLogin: '2025-08-15T14:30:00', createTime: '2023-01-15T09:00:00', remarks: '负责招聘和员工关系管理' },
                            { id: '2', name: '李四', email: 'lisi@company.com', department: 'IT', position: '技术总监', role: 'admin', phone: '13800138002', status: 'active', joinDate: '2022-05-20', lastLogin: '2025-08-15T16:45:00', createTime: '2022-05-20T10:30:00', remarks: '负责技术架构和团队管理' },
                            { id: '3', name: '王五', email: 'wangwu@company.com', department: 'Finance', position: '财务专员', role: 'employee', phone: '13800138003', status: 'active', joinDate: '2023-08-10', lastLogin: '2025-08-14T11:20:00', createTime: '2023-08-10T14:15:00', remarks: '负责日常财务工作' },
                            { id: '4', name: '赵六', email: 'zhaoliu@company.com', department: 'Operations', position: '运营经理', role: 'manager', phone: '13800138004', status: 'inactive', joinDate: '2023-03-12', lastLogin: '2025-08-10T09:15:00', createTime: '2023-03-12T11:45:00', remarks: '负责日常运营管理' },
                            { id: '5', name: '钱七', email: 'qianqi@company.com', department: 'IT', position: '前端开发', role: 'employee', phone: '13800138005', status: 'active', joinDate: '2024-01-08', lastLogin: '2025-08-15T17:30:00', createTime: '2024-01-08T14:20:00', remarks: '负责前端界面开发' }
                        ];
                        this.saveUserList();
                    }
                    this.filteredUserList = [...this.userList];
                },

                saveUserList() {
                    localStorage.setItem('userList', JSON.stringify(this.userList));
                },

                filterUsers() {
                    let filtered = [...this.userList];
                    if (this.searchKeyword) {
                        const keyword = this.searchKeyword.toLowerCase();
                        filtered = filtered.filter(user =>
                            user.name.toLowerCase().includes(keyword) ||
                            user.email.toLowerCase().includes(keyword)
                        );
                    }
                    if (this.departmentFilter) filtered = filtered.filter(user => user.department === this.departmentFilter);
                    if (this.roleFilter) filtered = filtered.filter(user => user.role === this.roleFilter);
                    if (this.statusFilter) filtered = filtered.filter(user => user.status === this.statusFilter);
                    this.filteredUserList = filtered;
                },

                resetFilter() {
                    this.searchKeyword = '';
                    this.departmentFilter = '';
                    this.roleFilter = '';
                    this.statusFilter = '';
                    this.filteredUserList = [...this.userList];
                },

                getDepartmentName(dept) {
                    const deptMap = { 'HR': '人力资源部', 'Finance': '财务部', 'IT': '技术部', 'Operations': '运营部' };
                    return deptMap[dept] || dept;
                },

                getRoleName(role) {
                    const roleMap = { 'admin': '管理员', 'manager': '经理', 'employee': '员工' };
                    return roleMap[role] || role;
                },

                getRoleClass(role) {
                    return role === 'admin' ? 'admin-role' : role === 'manager' ? 'manager-role' : '';
                },

                getStatusType(status) {
                    return status === 'active' ? 'success' : 'danger';
                },

                getStatusText(status) {
                    return status === 'active' ? '活跃' : '禁用';
                },

                formatDate(dateString) {
                    if (!dateString) return '-';
                    return new Date(dateString).toLocaleDateString('zh-CN');
                },

                formatDateTime(dateString) {
                    if (!dateString) return '-';
                    return new Date(dateString).toLocaleString('zh-CN');
                },

                viewUserDetails(user) {
                    this.selectedUser = user;
                    this.detailsDialogVisible = true;
                },

                handleDetailsClose() {
                    this.detailsDialogVisible = false;
                    this.selectedUser = null;
                },

                createNewUser() {
                    this.isEditMode = false;
                    this.userForm = { id: '', name: '', email: '', department: '', position: '', role: '', phone: '', status: 'active', remarks: '' };
                    this.userFormDialogVisible = true;
                },

                editUser(user) {
                    this.isEditMode = true;
                    this.userForm = { ...user };
                    this.userFormDialogVisible = true;
                    this.detailsDialogVisible = false;
                },

                submitUserForm() {
                    this.$refs.userForm.validate((valid) => {
                        if (valid) {
                            if (this.isEditMode) {
                                const index = this.userList.findIndex(u => u.id === this.userForm.id);
                                if (index !== -1) {
                                    this.$set(this.userList, index, { ...this.userForm });
                                    this.$message.success('用户更新成功');
                                }
                            } else {
                                const newUser = { ...this.userForm, id: Date.now().toString(), joinDate: new Date().toISOString().split('T')[0], createTime: new Date().toISOString(), lastLogin: null };
                                this.userList.unshift(newUser);
                                this.$message.success('用户创建成功');
                            }
                            this.saveUserList();
                            this.filterUsers();
                            this.userFormDialogVisible = false;
                        }
                    });
                },

                toggleUserStatus(user) {
                    const newStatus = user.status === 'active' ? 'inactive' : 'active';
                    const action = newStatus === 'active' ? '启用' : '禁用';
                    this.$confirm(`确定要${action}用户"${user.name}"吗？`, `${action}用户`, {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        user.status = newStatus;
                        this.saveUserList();
                        this.$message.success(`用户已${action}`);
                    });
                },

                deleteUser(user) {
                    this.$confirm(`确定要删除用户"${user.name}"吗？删除后无法恢复。`, '删除用户', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const index = this.userList.findIndex(u => u.id === user.id);
                        if (index !== -1) {
                            this.userList.splice(index, 1);
                            this.saveUserList();
                            this.filterUsers();
                            this.$message.success('用户删除成功');
                        }
                    });
                },

                exportUsers() {
                    this.$message.info('导出功能开发中...');
                },

                importUsers() {
                    this.$message.info('导入功能开发中...');
                },

                handleWindowResize() {
                    this.resizeTrigger++;
                    this.$nextTick(() => {
                        this.$forceUpdate();
                    });
                }
            }
        });
    </script>